<template>
  <div class="page-header">
    <div @click="handlePageBack" class="back">
      <el-icon :size="16">
        <ArrowLeftBold />
      </el-icon>
      <span>
        返回
      </span>
    </div>
    <slot name="extra">
      <div />
    </slot>
  </div>
  <div class="content">

    <slot />
  </div>
</template>


<script lang="ts" setup>
import { ArrowLeftBold } from '@element-plus/icons-vue'
import { DefineComponent, defineComponent } from 'vue';
import { useRouter } from 'vue-router';


const router = useRouter()

defineComponent<DefineComponent>({
  ArrowLeftBold
})


function handlePageBack() {
  router.back()
}
</script>


<style lang="less" scoped>
.page-header {
  background: #fff;
  height: 60px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 35px;
  align-items: center;
  margin-bottom: 20px;

  .back {
    display: flex;
    align-items: center;
    color: #2d5368;
    line-height: 1;
    cursor: pointer;
    font-size: 16px;
  }
}

.content {
  width: 1200px;
  margin: 0 auto;
}
</style>